<template>
  <div class="article-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="v in list" :key="v.art_id" :title="v.title" /> -->
        <!-- 写文章列表项组件 -->
        <ArticleListItem v-for="v in list" :key="v.art_id" :article="v" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleListItem from '../ArticleListItem/index'
export default {
  name: 'ArticleList',
  components: { ArticleListItem },
  props: {
    channelId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      refreshing: false, // 刷新中
      timestamp: Date.now(),
      list: [],
      loading: false,
      finished: false,
    }
  },
  methods: {
    onRefresh() {
      console.log('onRefresh', this.refreshing)
      // 重置数据
      // -- 列表数据
      // -- 完成状态
      this.list = []
      this.finished = false

      // 重新加载数据
      this.loading = true
      this.onLoad()

      // 停止刷新中状态
      this.refreshing = false
    },
    // onLoad 会自动触发：
    // 1. 初始加载会自动触发
    // 2. 当没有铺满容器，会继续自动触发
    // 3. 当滚动到底部会自动触发
    onLoad() {
      this._apis.article
        .getList({ channelId: this.channelId, timestamp: this.timestamp })
        .then(res => {
          const { pre_timestamp, results } = res.data.data
          this.timestamp = pre_timestamp // 用来获取下一次请求的timestamp参数
          // 这个切记不能直接赋值 this.list = result，要追加
          this.list.push(...results) // 列表数据
          this.loading = false // 要把加载中状态改成 false，这样才能触发 van-list 这个组件的下一次 load 事件
          // 如果响应回来的列表数据是个空数组，那么说明，没有了
          if (results.length === 0) {
            this.finished = true
          }
        })
    },
  },
}
</script>

<style></style>
